<template>
    <div class="my_table">
        <el-row>
            <el-col :span="20">
                <!-- 搜索框+按钮 -->
                <el-input @keyup.native.13='filterUser' v-model="value" placeholder="查询的人名" suffix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button @click="filterUser" type="primary">搜索</el-button>
            </el-col>
        </el-row>
        <!-- 表格，嵌入表格 -->
        <el-table
            :data="tableData.filter(data=> !value || data.name.includes(value) )">
            <!-- 从一级打开二级 -->
            <el-table-column type="expand">
                <!-- 二级的表格 -->
                <template slot-scope="props">
                    <el-table
                        :data="props.row.dateArr"
                        style="width: 100%">
                        <el-table-column
                            prop="date"
                            label="日期">
                        </el-table-column>
                         <el-table-column
                            prop="grade"
                            label="分数">
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
                <!-- 下面是一级的表格 -->
            <el-table-column prop='date' label="日期"></el-table-column>
            <el-table-column prop='name' label="姓名"></el-table-column>
            <el-table-column
                header-align="center"
                align="center"
                prop="grade"
                label="等级" >
            </el-table-column>
            <el-table-column
                header-align="center"
                align="center"
                prop="average"
                label="平均分" >
            </el-table-column>

            <el-table-column
                header-align="center"
                align="center"
                prop="totalScore"
                label="总分" >
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import data from './data';
export default {
    mounted(){
        //ajax请求
        setTimeout(()=>{
            this.tableData = data;
        },1500)
    },
    data(){
        return {
            value:'',
            //表格的数据一开始是空的
            tableData:[],
        }
    },
    methods:{
        //过滤用户
        filterUser(){
            // 从数组里找出一条数据
            const data=this.tableData.filter((item)=>{
                if(item.name.search(this.value) !== -1){
                    return item;
                }
            })
            console.log(data);
        }
    }
}
</script>